<template>
<header>窗口外上部分</header>
<main>
  <router-view :count="10" />
</main>
<footer>窗口外下部分</footer>
<figure>{{ title }}</figure>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'
import { computed, onMounted, watch } from 'vue'
import 'reset.css'

const router = useRouter()
const route = useRoute()
const title = computed(() => route.meta?.desc || '')

document.addEventListener('keyup', e => {
  if (e.key >= 'a' && e.key <= 'z' || e.key >= '0' && e.key <= '9') {
    router.push('/' + e.key)
  }
})

function rotateFigure () {
  const degree2radian = deg => deg * Math.PI / 180
  const angle = (180 - 45) / 2 // 67.5
  const theta = degree2radian(angle)

  const elFigure = document.querySelector('figure')
  elFigure.style.opacity = 0
  setTimeout(() => {
    const w = elFigure.clientWidth
    const square = w * (Math.sqrt(2) / 2)
    const offset = (square / Math.tan(theta))
    elFigure.style.transform = `translateX(${offset}px) rotate(45deg)`
    elFigure.style.opacity = ''
  }, 50)
}

onMounted(() => rotateFigure())
watch(title, () => rotateFigure())

</script>

<style lang="less" scoped>
header, footer {
  height: 25vh;
  background-color: fadeout(#000, 40%);
  color: fadeout(#fff, 40%);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  font-weight: 600;
  position: fixed;
  width: 100vw;
}
main {
  // height: 100vh;
  background-color: #fff;
  padding: 25vh 0;
}
header {
  top: 0;
}
footer {
  bottom: 0;
}
figure {
  position: fixed;
  right: 0;
  top: 0;
  transform: rotate(45deg);
  transform-origin: left;
  color: limegreen;
}
</style>

<style>
.item {
  font-size: 1.5rem;
  margin: .5em;
  padding: 0.5em;
  background-color: darkcyan;
  will-change: scroll-position;
}
.title {
  margin-bottom: 0.2em;
}
.child {
  font-size: 1rem;
  margin-left: 2em;
}
.child:not(:last-child) {
  margin-bottom: .2em;
}
</style>
